<template>
  <div class="test-cascader">
    <h1>Cascader 级联选择</h1>
    <p>从一组相关联的数据集合中进行选择，常用于省市区、公司级层、事务分类等。</p>
    <p>相比 Select 组件，可以一次性完成选择，体验更好。</p>
    <h2>基础用法</h2>
    <Cascader placeholder="请选择城市" :data="cityData" @on-change="change"></Cascader>
    <p>级联选择对数据有较严格要求，请参照示例的格式使用 <code>data</code> ，每项数据至少包含 <code>value</code> 、 <code>label</code>  两项，子集为 <code>children</code> ，以此类推。</p>
    <p> <code>value</code>  为当前选择的数据的 <code>value</code>  值的数组，比如 <code>['beijing', 'gugong']</code>  ，按照级联顺序依次排序，使用 <code>v-model</code> 进行双向绑定。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Cascader  placeholder="请选择城市" :data=&quot;cityData&quot;&gt;&lt;/Cascader&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            value: ['北京', '故宫'],
            cityData: [
              {
                value: 'beijing',
                label: '北京',
                children: [
                  {
                    value: 'gugong',
                    label: '故宫'
                  },
                  {
                    value: 'tiantan',
                    label: '天坛',
                    disabled: true
                  },
                  {
                    value: 'wangfujing',
                    label: '王府井'
                  }
                ]
              },
              {
                value: 'jiangsu',
                label: '江苏',
                // disabled: true,
                children: [
                  {
                    value: 'nanjing',
                    label: '南京',
                    children: [
                      {
                        value: 'fuzimiao',
                        label: '夫子庙',
                      }
                    ]
                  },
                  {
                    value: 'suzhou',
                    label: '苏州',
                    children: [
                      {
                        value: 'zhuozhengyuan',
                        label: '拙政园',
                      },
                      {
                        value: 'shizilin',
                        label: '狮子林',
                      }
                    ]
                  }
                ]
              },
              {
                value: 'xi an',
                label: '西安',
                disabled: true
              },
              {
                value: 'xianyang',
                label: '咸阳'
              }
            ]
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>默认值</h2>
    <Cascader  v-model="value" :data="cityData"></Cascader>
    <Button type="primary" @click="changeDefaultValue">改变默认值</Button>
    <span>{{this.value}}</span>
    <p>指定 <code>value</code> 默认值，组件会在初始化时选定数据。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Cascader  v-model=&quot;value&quot; :data=&quot;cityData&quot;&gt;&lt;/Cascader&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            value: ['北京', '故宫'],
            cityData: [
              {
                value: 'beijing',
                label: '北京',
                children: [
                  {
                    value: 'gugong',
                    label: '故宫'
                  },
                  {
                    value: 'tiantan',
                    label: '天坛',
                    disabled: true
                  },
                  {
                    value: 'wangfujing',
                    label: '王府井'
                  }
                ]
              },
              {
                value: 'jiangsu',
                label: '江苏',
                // disabled: true,
                children: [
                  {
                    value: 'nanjing',
                    label: '南京',
                    children: [
                      {
                        value: 'fuzimiao',
                        label: '夫子庙',
                      }
                    ]
                  },
                  {
                    value: 'suzhou',
                    label: '苏州',
                    children: [
                      {
                        value: 'zhuozhengyuan',
                        label: '拙政园',
                      },
                      {
                        value: 'shizilin',
                        label: '狮子林',
                      }
                    ]
                  }
                ]
              },
              {
                value: 'xi an',
                label: '西安',
                disabled: true
              },
              {
                value: 'xianyang',
                label: '咸阳'
              }
            ]
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>禁用</h2>
    <Cascader placeholder="请选择城市" :data="cityData" disabled></Cascader>
    <Cascader placeholder="请选择城市" :data="cityData"></Cascader>
    <p>设置属性 <code>disabled</code> 可以禁用组件。</p>
    <p>给某项数据设置 <code>disabled: true</code> 可以禁用某一项。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Cascader placeholder=&quot;请选择城市&quot; :data=&quot;cityData&quot; disabled&gt;&lt;/Cascader&gt;
        &lt;Cascader placeholder=&quot;请选择城市&quot; :data=&quot;cityData&quot;&gt;&lt;/Cascader&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            value: ['北京', '故宫'],
            cityData: [
              {
                value: 'beijing',
                label: '北京',
                children: [
                  {
                    value: 'gugong',
                    label: '故宫'
                  },
                  {
                    value: 'tiantan',
                    label: '天坛',
                    disabled: true
                  },
                  {
                    value: 'wangfujing',
                    label: '王府井'
                  }
                ]
              },
              {
                value: 'jiangsu',
                label: '江苏',
                // disabled: true,
                children: [
                  {
                    value: 'nanjing',
                    label: '南京',
                    children: [
                      {
                        value: 'fuzimiao',
                        label: '夫子庙',
                      }
                    ]
                  },
                  {
                    value: 'suzhou',
                    label: '苏州',
                    children: [
                      {
                        value: 'zhuozhengyuan',
                        label: '拙政园',
                      },
                      {
                        value: 'shizilin',
                        label: '狮子林',
                      }
                    ]
                  }
                ]
              },
              {
                value: 'xi an',
                label: '西安',
                disabled: true
              },
              {
                value: 'xianyang',
                label: '咸阳'
              }
            ]
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>点击展开</h2>
    <Cascader  v-model="value" :data="cityData" trigger="click"></Cascader>
    <p>设置属性 <code>trigger</code> 为 <code>click</code> ，当鼠标点击时就会展开子集。默认为 <code>hover</code> 展开。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Cascader  v-model=&quot;value&quot; :data=&quot;cityData&quot; trigger=&quot;click&quot;&gt;&lt;/Cascader&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            value: ['北京', '故宫'],
            cityData: [
              {
                value: 'beijing',
                label: '北京',
                children: [
                  {
                    value: 'gugong',
                    label: '故宫'
                  },
                  {
                    value: 'tiantan',
                    label: '天坛',
                    disabled: true
                  },
                  {
                    value: 'wangfujing',
                    label: '王府井'
                  }
                ]
              },
              {
                value: 'jiangsu',
                label: '江苏',
                // disabled: true,
                children: [
                  {
                    value: 'nanjing',
                    label: '南京',
                    children: [
                      {
                        value: 'fuzimiao',
                        label: '夫子庙',
                      }
                    ]
                  },
                  {
                    value: 'suzhou',
                    label: '苏州',
                    children: [
                      {
                        value: 'zhuozhengyuan',
                        label: '拙政园',
                      },
                      {
                        value: 'shizilin',
                        label: '狮子林',
                      }
                    ]
                  }
                ]
              },
              {
                value: 'xi an',
                label: '西安',
                disabled: true
              },
              {
                value: 'xianyang',
                label: '咸阳'
              }
            ]
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>自定义已选项</h2>
    <Cascader  v-model="value" :data="cityData" :renderFormat="formatValue"></Cascader>
    <p>对于显示的结果，可以通过 <code>renderFormat</code> 接收一个函数来自定义。</p>
    <p>其中第一个参数 <code>labelArr</code> 是当前选择的 <code>label</code> 的集合，第二个参数 <code>selectedArr</code> 是当前选择的数据集合，可以利用它们组合出你想要显示的内容。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Cascader  v-model=&quot;value&quot; :data=&quot;cityData&quot; :renderFormat=&quot;formatValue&quot;&gt;&lt;/Cascader&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            value: ['北京', '故宫'],
            cityData: [
              {
                value: 'beijing',
                label: '北京',
                children: [
                  {
                    value: 'gugong',
                    label: '故宫'
                  },
                  {
                    value: 'tiantan',
                    label: '天坛',
                    disabled: true
                  },
                  {
                    value: 'wangfujing',
                    label: '王府井'
                  }
                ]
              },
              {
                value: 'jiangsu',
                label: '江苏',
                // disabled: true,
                children: [
                  {
                    value: 'nanjing',
                    label: '南京',
                    children: [
                      {
                        value: 'fuzimiao',
                        label: '夫子庙',
                      }
                    ]
                  },
                  {
                    value: 'suzhou',
                    label: '苏州',
                    children: [
                      {
                        value: 'zhuozhengyuan',
                        label: '拙政园',
                      },
                      {
                        value: 'shizilin',
                        label: '狮子林',
                      }
                    ]
                  }
                ]
              },
              {
                value: 'xi an',
                label: '西安',
                disabled: true
              },
              {
                value: 'xianyang',
                label: '咸阳'
              }
            ]
          }
        },
        methods: {
          formatValue(labelArr, selectArr) {
            // console.log(labelArr, selectArr)
            return labelArr.join(' --> ')
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h1>API</h1>
    <p>Cascader props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
    <br>
    <p>Cascader events</p>
    <Table :columns="tableColumn1" :data="tableData1"></Table>
  </div>
</template>

<script>
import cityData from '../cascaderEasy/city'
export default {
  /**
   * disabled: 禁用
   * clearable: 清除按钮
   * placeholder: 占位符
   * filterable: 搜索
   */
  name: 'test-cascader',
  data () {
    return {
      value: ['ShanXi', 'XiAn', 'XiAn'],
      cityData: cityData,
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain',
          width: 350
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableData: [
        {
          attribute: 'data',
          explain: '可选项的数据源，格式参照示例说明',
          type: 'Array',
          default: '[ ]'
        },
        {
          attribute: 'value',
          explain: '当前已选项的数据，格式参照示例说明',
          type: 'Array',
          default: '[ ]'
        },
        {
          attribute: 'renderFormat',
          explain: '选择后展示的函数，用于自定义显示格式',
          type: 'Function',
          default: 'label => label.join(" --> ")'
        },
        {
          attribute: 'disabled',
          explain: '是否禁用选择器',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'clearable',
          explain: '是否支持清除',
          type: 'Boolean',
          default: 'true'
        },
        {
          attribute: 'placeholder',
          explain: '输入框占位符',
          type: 'String',
          default: '请选择'
        },
        {
          attribute: 'trigger',
          explain: '次级菜单展开方式，可选值为 click 或 hover',
          type: 'String',
          default: 'hover'
        }
      ],
      tableColumn1: [
        {
          title: '事件名',
          key: 'event'
        },
        {
          title: '说明',
          key: 'type',
          tooltip: true
        },
        {
          title: '返回值',
          key: 'callback'
        }
      ],
      tableData1: [
        {
          event: 'on-change',
          type: '选择完成后的回调，返回值 value 即已选值 value，selectedData 为已选项的具体数据',
          callback: 'value, selectedData'
        }
      ]
    }
  },
  methods: {
    formatValue (labelArr, selectArr) {
      // console.log(labelArr, selectArr)
      return labelArr.join(' --> ')
    },
    changeDefaultValue () {
      this.value = ['北京', '王府井']
    },
    change (val) {
      console.log(val)
    }
  }
}
</script>

<style scoped lang="less">
h1 {
  font-size: 18px;
}
h2 {
  font-size: 14px;
  margin-bottom: 10px;
}
code {
  background-color: #aaa;
}
pre {
  font-size: 14px;
}
span {
  margin-left: 10px;
}
p {
  padding: 5px 0;
}
</style>
